<template>
    <div class="container">
        <div class="header">
            <h1 class="title">共发布 {{ issueList.length }} 期</h1>
            <div class="filter-area">
                <div class="date-picker">
                    <div class="block">
                        <el-date-picker v-model="value2" type="datetimerange" :shortcuts="shortcuts"
                            range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
                    </div>
                </div>
                <input type="text" class="search-input" placeholder="请输入文章摘要或标题">
            </div>
        </div>


        <div class="article-item" v-for="item in issueList" :key="item.issueNo">
            <img src="" alt="文章封面" class="article-img">
            <div class="article-info">
                <div>
                    <span class="publish-info">
                        新闻将于{{ item.publishTime }}自动发布
                    </span>
                </div>
                <span class="view-icon"></span>
            </div>
        </div>
    </div>

    <div class="pagination">

    </div>

</template>

<script lang="ts" setup>
//日历
import { ref ,onMounted,watch} from 'vue'
import {newIssueList} from '@/api/newspool'
const value2 = ref('')
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        },
    },
]
//数据获取
interface NewsItem {
    issueNo: number;
    publishTime: string;
    coverImage: string;
    description: string;
    title: string;
    newsIds: number[];
    publisher: string;
}

interface IssueListResponse {
    code: number;
    message: string;
    data: {
        records: NewsItem[];
        total: number;
        currentIssueNo: number;
    };
}

const fetchData = async () => {
    try {
        const params = { 
            "current": 1, 
            "currentSize": 10 
        };
        const res = await newIssueList(params) as IssueListResponse;
        
        if (res.code === 200) {
            console.log('接口数据为:', res.data);
            console.log('记录列表:', res.data.records);
            console.log('总数:', res.data.total);
            console.log('当前期号:', res.data.currentIssueNo);
            
            issueList.value = res.data.records;
            total.value = res.data.total;
            currentIssueNo.value = res.data.currentIssueNo;
        } else {
            console.log('接口返回错误:', res.message);
        }
    } catch (error) {
        console.error('获取数据失败', error);
    }
};


// 添加响应式数据存储
const issueList = ref<NewsItem[]>([]);
const total = ref(0);
const currentIssueNo = ref(0);

onMounted(() => {
    fetchData();
});


</script>

<style>
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.block {
    padding: 5px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
    min-width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block:last-child {
    border-right: none;
}

.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .block {
        flex: 100%;
        border-right: none;
        border-bottom: solid 1px var(--el-border-color);
    }

    .block:last-child {
        border-bottom: none;
    }

    :deep(.el-date-editor.el-input) {
        width: 100%;
    }

    :deep(.el-date-editor.el-input__wrapper) {
        width: 100%;
        max-width: 300px;
    }
}

/* 页面整体容器 */
.container {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 头部区域 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.filter-area {
    display: flex;
    gap: 12px;
}

.date-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-picker input {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    color: #6b7280;
}

.search-input {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    color: #6b7280;
    width: 240px;
    height: 30px;
    box-sizing: border-box;
    margin: auto 0;
}

/* 文章列表项 */
.article-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.article-item:last-child {
    border-bottom: none;
}

.article-img {
    width: 200px;
    height: 100px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 16px;
}

.article-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.publish-info {
    color: #f97316;
    font-size: 14px;
}

.publish-info a {
    color: #3b82f6;
    text-decoration: none;
    margin-left: 8px;
}

.view-icon {
    color: #9ca3af;
    font-size: 20px;
}

/* 分页区域 */
.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24px;
    gap: 8px;
}

.page-info {
    font-size: 14px;
    color: #6b7280;
}

.page-btn {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
}

.page-btn.active {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #3b82f6;
}

.page-size {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
}

/* 编辑按钮样式 */
.edit-btn {
    border: none;
    background: none;
    color: #f56c6c;
    cursor: pointer;
    text-decoration: none;
    margin-left: 8px;
}

.edit-btn:hover {
    color: #f78989;
    text-decoration: underline;
}
</style>